<template>
	<div style="width: 800px;">
		<calendar :eventContent="eventContent" @date-click="dateClick" :events="events"></calendar>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	import {
		EventContentArg
	} from '@fullcalendar/core';
	import {
		DateClickArg
	} from '_@fullcalendar_interaction@5.11.10@@fullcalendar/interaction';


	let events = ref([{
			title: '购物',
			start: '2022-05-24 10:00:00',
			end: '2022-05-24 12:00:00',
			editable: true
		},
		{
			title: '学习',
			start: '2022-05-25 08:00:00',
			end: '2022-05-25 16:00:00'
		}
	])

	let dateClick = info => {
		let event = {
			start: `${info.dateStr} 12:00:00`,
			end: `${info.dateStr} 13:00:00`,
			title: '吃饭'
		}
		events.value.push(event)
	}

	let eventContent = arg => {
		let el = document.createElement('div')
		let timeTextArr = arg.timeText.split(' - ')
		let start = timeTextArr[0]
		let end = timeTextArr[1]
		el.innerHTML = `
	         <div>开始时间: ${start}</div>
	         <div>结束时间: ${end}</div>
	         <div>标题: ${arg.event._def.title}</div>
	        `
		return {
			domNodes: [el]
		}
	}
</script>

<style scoped>

</style>
